<template>
  <div class="rpBox">
    <div id="container"></div>
    <a-spin class="loading" v-if="loading"></a-spin>
  </div>
</template>
<script>
// import smChartTitle from '@/components/base/echarts/smChartTitle.vue'
import G6 from '@antv/g6'
export default {
  components: {
    // smChartTitle,
  },
  props: {
    chartData: {
      type: Object,
    },
    loading: {
      type: Boolean,
    },
  },
  data() {
    return {
      chart: '',
    }
  },
  mounted() {
    // console.log(this.chartData)
    // debugger
    // this.Initialization()
    // this.$nextTick(() => {
    //   this.Initialization()
    // })
  },
  watch: {
    chartData(val) {
        // this.chart.changeData(val)
         this.Initialization()
    },
  },
  methods: {
    Initialization() {
      const container = document.getElementById('container')
      const width = container.scrollWidth
      const height = container.scrollHeight || 500
      const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        linkCenter: true,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const data = item.get('model')
                data.collapsed = collapsed
                return true
              },
            },
            // 'drag-canvas',
            // 'zoom-canvas',
          ],
        },
        defaultNode: {
          size: 70,
        },
        layout: {
          type: 'dendrogram',
          direction: 'LR',
          nodeSep: 60,
          rankSep: 100,
          radial: true,
        },
      })

      graph.node(function (node) {
        return {
          label: node.id,
        }
      })

      graph.data(this.chartData)
      graph.render()
      graph.fitView()

      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
    },
  },
}
</script>
<style lang="less" scoped>
.rpBox {
  position: relative;
  width: 100%;
  height: 100%;
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  > div {
    width: 100%;
    height: 100%;
  }
}
</style>
